<template>
	<view >
		<view
			class="head-bg " 
			:style="{
				'background': `url(${getImg('rebate-bg')}) no-repeat center top`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="返利余额"
			>
			</head-nav>
			<view class="head-box pad-l96 mar-t46">
				<view class="head-tit">
					返利余额
				</view>
				<view class="head-price mar-t14">
					<text class="f-s28">¥</text>
					<text class="f-s48">2000</text>
				</view>
				<view class="head-btn flex-center mar-t14">
					提现
				</view>
			</view>
			<view class="tabs-box mar-t48">
				<u-tabs
					:list="tabsList"
					lineColor="#FF7171"
					:current="tabsCurrent"
					lineWidth="120rpx"
					lineHeight="8prx"
					:activeStyle="{
						color: '#111111',
						transform: 'scale(1.05)',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#333333',
					}"
					@change="tabsChange"
				></u-tabs>
			</view>
			<view class="list-box padlr24 mar-t24">
				<view 
					class="list-li bg-f mar-t padlr20 pad-t24" 
					v-for="(item, index) in list" 
					:key="index"
				>
					<view class="flex-a ju-bt pad-b24">
						<view class="li-l">
							<view class="l-tit">
								分享收益
							</view>
							<view class="l-time mar-t12">
								2024-10-20 09:00:00
							</view>
						</view>
						<view class="li-r">
							<view class="r-txt1" v-if="!tabsCurrent">
								+10.00
							</view>	
							<view class="r-txt2" v-else>
								-100.00
							</view>
						</view>
					</view>
					<u-line  v-if="index < list.length - 1"></u-line>
				</view>
			</view>
		</view>
	</view>
</template>

<script> // 返利余额
	export default {
		data() {
			return {
				tabsCurrent: 0,
				tabsList: [
					{
						name: '收益明细',
					}, 
					{
						name: '提现记录',
					}, 
				],
				list: [1,1,1,1,1]
			}
		},
		onLoad() {
			
		},
		methods: {
			tabsChange(eve) {
				this.tabsCurrent = eve.index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		.l-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
		}
		.l-time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}
		.li-r {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			.r-txt1 {
				color: #FF7171;
			}
			.r-txt2 {
				
				color: #111111;
			}
		}
	}
	.head-box {
		.head-btn {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 168rpx;
			height: 60rpx;
			background: #FF7171;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}
		.head-price {
			font-family: MiSans, MiSans;
			font-weight: 500;
			color: #000000;
		}
		.head-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.head-bg {
		height: 100vh;
		background-size: 100% 100% !important;
	}
</style>
